<template>
  <div class="yun-view">
    <div class="online-users">
      <div class="online-title">当前在线用户</div>
      <div class="user-list">
        <div class="user-item" v-for="(item,index) in Ydata.userList" :key="index">{{ item }}</div>
      </div>
    </div>
    <div class="users-message">
      <div class="chat-content">
        <div class="chat-msg" v-for="(item,index) in Ydata.msgList" :key="index">
          <div class="item-user">{{ item.user }}</div>
          <div class="item-msg">{{ item.msg }}</div>
        </div>
      </div>
      <div class="chat-input">
        <el-input v-model="Ydata.message" class="chat-textarea" type="textarea" rows="6" @keydown.enter="sendMessage"></el-input>
        <div class="chat-btns">
          <el-button type="primary" size="default" @click="sendMessage">发送</el-button>
        <el-button type="primary" size="default" @click="clearMessage">清空</el-button>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script setup>
import {onUnmounted, reactive } from 'vue'
import {useUserStore} from '@/store/userStore'
const userStore = useUserStore()
const socket = new WebSocket(`ws://127.0.0.1:8000/chat/8527/`)
const Ydata = reactive({
  userList:["admin",'wolf'],
  msgList:[],
  message:""
})
socket.onopen = ()=>{
  console.log('前端连接成功')
  let msg = {type:"open",user:userStore.userInfo.name,msg:`${userStore.userInfo.name}上线了`}
  socket.send(JSON.stringify(msg))
}
socket.onmessage = (msg)=>{
  console.log('前端接收到数据',msg)
  let data = JSON.parse(msg.data)
  Ydata.userList = data.userList || []
  Ydata.msgList.push(data.msg)
}
socket.onclose = ()=>{
  console.log('前端断开连接')
}
const sendMessage = ()=>{
  let msg = {type:"send",user:userStore.userInfo.name,msg:Ydata.message}
  socket.send(JSON.stringify(msg))
  Ydata.message = ""
}
const clearMessage = ()=>{
  Ydata.message = ''
}
onUnmounted(()=>{
  let msg = {type:"close",user:userStore.userInfo.name,msg:`${userStore.userInfo.name}断开了`}
  socket.send(JSON.stringify(msg))
  socket.close()
})
</script>

<style lang="scss" scoped>
.yun-view{
  display: flex;
  .online-users{
    width:30%;
    height:100%;
    border: 1px solid var(--main-color);
    background: #fff;
    padding: 10px;
    border-radius:8px;
    .online-title{
      width:100%;
      padding:4px 8px;
      font-size: 16px;
      color:var(--main-color);
      font-weight: bold;
    }
    .user-list{
      height:calc(100% - 60px);
      overflow-y: auto;
      display: flex;
      flex-wrap: wrap;
      padding:10px;
      .user-item{
        font-size:14px;
        height:30px;
        line-height: 28px;
        color:var(--main-color);
        padding:0 8px;
        border: 1px solid var(--main-color);
        border-radius:8px;
        margin:4px 5px;
        cursor: pointer;
      }
    }
  }
  .users-message{
    width:70%;
    margin-left:10px;
    display: flex;
    flex-direction: column;
    .chat-content{
      flex:1; 
      background: #f9ffff;
      margin-bottom: 10px;
      border: 1px solid var(--main-color);
      border-radius:8px;
      padding:10px;
      .chat-msg{
        display: flex;
        line-height:30px;
        .item-user{
          font-size:14px;
          font-weight: bold;
          color:var(--main-color);
          width:60px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .item-msg{
          font-size:14px;
          color:#666;
          background: #fff;
          box-shadow: 0 0 2px #efefef;
        }
      }
    }
    .chat-input{
      height:180px;
      v-deep.chat-textarea{
        width:100%;
        height:180px;
        .el-textarea__inner{
          width:100%;
          height:115px;
        }
      }
      .chat-btns{
        margin-top:10px;
      }
    }
  }
}
</style>